import Card from 'components/CodeCard'
import { View } from '@tarojs/components'
import s from './index.module.scss'
import code from './code.md'
import Carousel from '../carousel'

// 1. 修复 dot 选中状态的问题
// 2. 支持 dot 的点击事件
// 3. 封装 参考 页面 https://ant-design.antgroup.com/components/carousel-cn
// 我确实晓得子元素是如何传进来的，但是传进来的方式不太懂
// 子元素放在件括号之间
// 

export default function Index() { 
  return (
    <Card
      title='轮播图'
      desc='3d旋转实现轮播图'
      renderCode={() => (
        <wemark md={code} link highlight type='wemark' />
      )}
    >
      <Carousel dot loop height={500}>
          <View className={`${s.side0} ${s.side}`}>1</View>
          <View className={`${s.side1} ${s.side}`}>2</View>
          <View className={`${s.side2} ${s.side}`}>3</View>
          <View className={`${s.side3} ${s.side}`}>4</View>
          <View className={`${s.side4} ${s.side}`}>5</View>
          <View className={`${s.side5} ${s.side}`}>6</View>
          <View className={`${s.side6} ${s.side}`}>7</View>
      </Carousel>
    </Card>
  )
}